<template>
  <div class="box">
    <h1>我是父亲曹操:{{ money }}</h1>
    <button @click="handler">找我的儿子借10块</button>
    <hr />
    <Son ref="sonRef"/>
    <Dau />
  </div>
</template>

<script setup lang="ts">
  //ref:可以获取真实的DOM节点,可以获取到子组件实例VC
  //$parent:可以在子组件内部获取到父组件的实例
  import { ref } from 'vue'
  import Son from './Son.vue';
  import Dau from './Daughter.vue';

  const money = ref(10000)
  const sonRef = ref()
  const handler = () => {
    money.value += 10
    sonRef.value.money -= 10
    sonRef.value.fly()
  }

  defineExpose({
    money
  })

</script>

<style scoped>
.box{
  width: 100vw;
  height: 500px;
  background: skyblue;
}
</style>